<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button v-auth="Permission.ADD" type="primary" @click="handleCreate"> 新增 </a-button>
        <a-button v-auth="Permission.DEL" color="error" v-show="rowSelected" @click="handleBatchDelete"> 删除
        </a-button>
        <a-button @click="expandAll"> 展开 </a-button>
        <a-button @click="collapseAll"> 折叠 </a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'menuStatus'">
          {{ formatDictValue(dataStatus, record.menuStatus) }}
        </template>
        <template v-else-if="column.key === 'menuType'">
          {{ formatDictValue(menuType, record.menuType) }}
        </template>
        <template v-else-if="column.key === 'action'">
          <TableAction :actions="createActions(record)" />
        </template>
      </template>
    </BasicTable>
    <MenuDrawer @register="registerDrawer" @success="handleSuccess" />
    <ButtonModal @register="registerButtonModal" @success="handleSuccess" />
  </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, ref } from 'vue';
import {
  BasicTable,
  useTable,
  TableAction,
  ActionItem,
  EditRecordRow,
} from '/@/components/Table';
import { getMenuListApi, delMenuApi } from '/@/api/sys/menu';
import { getDictDetailListApi } from '/@/api/sys/dict';
import { Permission, columns, searchFormSchema } from './index-option';
import { useDrawer } from '/@/components/Drawer';
import { useModal } from '/@/components/Modal';
import MenuDrawer from './drawer.vue';
import ButtonModal from './button-modal.vue';
import { useMessage } from '/@/hooks/web/useMessage';
import { MenuTypeEnum } from '/@/enums/sysEnum';
import { formatDictValue } from '/@/utils';

const menuType = ref([]);
const dataStatus = ref([]);
onBeforeMount(async () => {
  const menuTypeData = await getDictDetailListApi({ code: 'menu_type' });
  menuType.value = menuTypeData.data;
  const dataStatusData = await getDictDetailListApi({ code: 'data_status' });
  dataStatus.value = dataStatusData.data;
});

const { createMessage, createConfirm } = useMessage();

const rowSelected = ref(false);
const [registerTable, { reload, expandAll, collapseAll, getSelectRowKeys }] = useTable({
  title: '菜单列表',
  rowKey: 'menuId',
  api: getMenuListApi,
  columns,
  formConfig: {
    labelWidth: 80,
    schemas: searchFormSchema,
  },
  isTreeTable: true,
  pagination: false,
  striped: false,
  useSearchForm: true,
  bordered: true,
  ellipsis: true,
  rowSelection: {
    type: 'checkbox',
    onChange: (selectedRowKeys) => {
      rowSelected.value = selectedRowKeys.length > 0;
    }
  },
  actionColumn: {
    width: 240,
    title: '操作',
    dataIndex: 'action',
    fixed: undefined,
  },
});

const [registerDrawer, { openDrawer }] = useDrawer();
const [registerButtonModal, { openModal: openButtonModal }] = useModal();

function handleCreate() {
  openDrawer(true, { isUpdate: false });
}

function handleCreateCrudButton(record: Recordable) {
  openButtonModal(true, { record });
}

function handleEdit(record: Recordable) {
  openDrawer(true, {
    record,
    isUpdate: true,
  });
}

function handleDelete(menuIds: string[]) {
  delMenuApi(menuIds).then((res) => {
    createMessage.success(res.msg);
    handleSuccess();
  });
}

function handleBatchDelete() {
    createConfirm({
        iconType: 'warning',
        title: '确认提示',
        content: '请确认是否删除选中的菜单？',
        onOk: () => {
            handleDelete(getSelectRowKeys());
        }
    });
}

function handleSuccess() {
  reload();
}

function createActions(record: EditRecordRow): ActionItem[] {
  return [
    {
      icon: 'clarity:note-edit-line',
      label: '编辑',
      auth: Permission.EDIT,
      onClick: handleEdit.bind(null, record),
    },
    {
      icon: 'ant-design:plus-outlined',
      label: '新增按钮',
      auth: Permission.ADD,
      ifShow: MenuTypeEnum.MENU === record.menuType,
      onClick: handleCreateCrudButton.bind(null, record),
    },
    {
      icon: 'ant-design:delete-outlined',
      label: '删除',
      auth: Permission.DEL,
      color: 'error',
      tooltip: '不可以删除含有下级菜单的菜单',
      popConfirm: {
        title: '是否删除菜单【' + record.title + '】？',
        confirm: handleDelete.bind(null, [record.menuId]),
      },
    },
  ];
}
</script>
